<template>
  <div class="pruduct-select">
    <div class="pruduct-detai">
      <img src alt />
      <div>
        <span>影楼级高端相册</span>
        <span>多场景通用模版，浅灰册</span>
        <span>
          <i class="iconfont makerqian"></i>
          261.00
        </span>
      </div>
    </div>
    <div class="pruduct-type-select">
      <div v-for="(item, index) in TypeSelectlist" :key="index">
        <type-select
          :active-id="item.activeId"
          :type-title="item.title"
          :type-list="item.list"
          @handleSelect="handleSelect"
        />
      </div>
    </div>
    <div class="need-mun">
      <span>购买数量：</span>
      <nut-stepper
        :simple="false"
        :readonly="true"
        :value.sync="munValue"
        @change="handleChangeVal"
      />
    </div>
    <div class="add-btn">
      <nut-button block shape="circle" @click="handleGoSelectPhoto">立即定制</nut-button>
    </div>
  </div>
</template>

<script>
import TypeSelect from '../../../components/TypeSelect';

export default {
  name: 'PruductSelect',
  components: {
    TypeSelect,
  },
  data() {
    return {
      munValue: 1,
      TypeSelectlist: [
        {
          activeId: 1,
          title: '商品规格',
          list: [
            {
              id: 1,
              name: '多场景通用模版',
            },
            {
              id: 2,
              name: '儿童专属模版',
            },
            {
              id: 3,
              name: '通用模版',
            },
            {
              id: 4,
              name: '用模版',
            },
            {
              id: 5,
              name: '儿童专属模版',
            },
            {
              id: 6,
              name: '通用模版',
            },
            {
              id: 7,
              name: '用模版',
            },
            {
              id: 8,
              name: '用模版',
            },
          ],
        },
        {
          activeId: 2,
          title: '商品规格2',
          list: [
            {
              id: 1,
              name: '多场景通用模版',
            },
            {
              id: 2,
              name: '儿童专属模版',
            },
          ],
        },
        {
          activeId: 1,
          title: '商品规格3',
          list: [
            {
              id: 1,
              name: '多场景通用模版',
            },
            {
              id: 2,
              name: '儿童专属模版',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleSelect(d) {
      this.TypeSelectlist.forEach((item) => {
        if (item.title === d.typeName) {
          item.activeId = d.id;
        }
      });
    },
    handleChangeVal() {
      console.log('munValue=', this.munValue);
    },
    handleGoSelectPhoto() {
         this.$router.push('/photoTable/photoDetails');
    },
  },
};
</script>

<style scoped lang="scss">
.pruduct-select {
  width: 90vw;
}
.pruduct-detai {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 20vw;
    height: 20vw;
    border-radius: 10px;
    overflow: hidden;
    background-color: pink;
  }
  & > div {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 64vw;
    }
  }
  & > div > span:first-child {
    font-size: 18px;
    color: #202020;
    margin-bottom: 0.5vh;
    font-weight: bolder;
  }
  & > div > span:nth-child(2) {
    font-size: 12px;
    color: #a4a4a4;
    margin-bottom: 1.5vh;
  }
  & > div > span:last-child {
    font-size: 22px;
    color: #fd5e4b;
  }
}
.pruduct-type-select {
  width: 100%;
  // height: 40vh;
  // background-color: pink;
}
.need-mun {
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  .add-btn {
    width: 80vw;
    margin-top: 5vh;
    margin-left: 5vw;
    margin-bottom: 10vw;
    .nut-button {
      background: #ff7e00;
    }
  }
</style>
